import React, { useState } from 'react'
import { Layout } from 'antd';
import Menus from '@/layui/component/Menu'
import HeaderMenu from '@/layui/component/header'
const { Header, Content, Sider } = Layout;
import "./layui.less"
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons';

import {useStores} from '@/stores'
import { observer } from 'mobx-react-lite'
import FrontendAuth from '@/router/frontendAuth'
const Layui = () =>{

  const [collapsed,setCollapsed] = useState<boolean>(false)
  const {userStores} = useStores()
  const {info} = userStores
  const toggle = () => {
    setCollapsed(!collapsed)
  }

  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}/>

      <Sider trigger={null} collapsible collapsed={collapsed} style={{overflow:"hidden",position:"fixed",height:"100%"} }

             onBreakpoint={broken => {
               console.log(broken);
             }}
             onCollapse={(collapsed, type) => {
               console.log(collapsed, type);
             }}>
        <div className="logo" />
        <Menus/>
      </Sider>
      <Layout className="site-layout" >
        <Header className="site-layout-background" style={{paddingLeft:20}}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: toggle,
          })}
          <HeaderMenu name={info.user_name}/>
        </Header>
        <Content

          style={{

            padding: 24,
            height: "100%",
          }}
        >
          <FrontendAuth/>


        </Content>
      </Layout>
    </Layout>
  )
}

export default observer(Layui);
